<section class="crayons-card p-7 m:basis-2-3">
  <header class="flex justify-between items-center mb-7">
    <h2 class="crayons-subtitle-1">Activity Statistics</h2>
    <div class="relative w-auto">
      <button type="button" class="c-btn c-btn--icon-alone dropdown-trigger whitespace-nowrap" id="timeperiods-trigger" aria-haspopup="true" aria-expanded="false" aria-controls="options-dropdown">
        <%= crayons_icon_tag("calendar", title: "Timeframes", class: "c-btn__icon") %>
      </button>
      <div class="crayons-dropdown right-0 left-0 s:left-auto" id="timeperiods-dropdown">
        <fieldset class="mb-2">
          <ul class="mb-0 p-2 flex flex-col gap-3">
            <li class="crayons-field crayons-field--radio">
              <%= radio_button_tag :period, 7, true, class: "crayons-radio js-period-selector", id: "7days", data: { period: 7 } %>
              <label for="7days" class="crayons-field__label">Last 7 days</label>
            </li>
            <li class="crayons-field crayons-field--radio">
              <%= radio_button_tag :period, 30, false, class: "crayons-radio js-period-selector", id: "30days", data: { period: 30 } %>
              <label for="30days" class="crayons-field__label">Last 30 days</label>
            </li>
            <li class="crayons-field crayons-field--radio">
              <%= radio_button_tag :period, 90, false, class: "crayons-radio js-period-selector", id: "90days", data: { period: 90 } %>
              <label for="90days" class="crayons-field__label">Last 90 days</label>
            </li>
          </ul>
        </fieldset>
      </div>
    </div>
  </header>

  <div class="grid s:grid-cols-2 gap-7" id="admin-stats-container">
    <div class="stat-card">
      <div class="color-secondary">
        <p class="fs-s mb-2">Published Posts</p>
        <h3 class="crayons-subtitle-2 fw-bold" data-stat="published_posts">
          <span class="js-loading-placeholder">Loading...</span>
        </h3>
      </div>
    </div>

    <div class="stat-card">
      <div class="color-secondary">
        <p class="fs-s mb-2">Comments</p>
        <h3 class="crayons-subtitle-2 fw-bold" data-stat="comments">
          <span class="js-loading-placeholder">Loading...</span>
        </h3>
      </div>
    </div>

    <div class="stat-card">
      <div class="color-secondary">
        <p class="fs-s mb-2">Public Reactions</p>
        <h3 class="crayons-subtitle-2 fw-bold" data-stat="public_reactions">
          <span class="js-loading-placeholder">Loading...</span>
        </h3>
      </div>
    </div>

    <div class="stat-card">
      <div class="color-secondary">
        <p class="fs-s mb-2">New Users</p>
        <h3 class="crayons-subtitle-2 fw-bold" data-stat="new_users">
          <span class="js-loading-placeholder">Loading...</span>
        </h3>
      </div>
    </div>
  </div>
</section>
